<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改教师请假')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-leaveTea-edit" th:object="${leaveTeacher}">
            <input name="id" th:field="*{id}" type="hidden">
            <input id="leaverTableId" name="leaverId" type="hidden" th:field="*{leaverId}" />
            <input name="durType" type="hidden" th:field="*{durType}"/>
            <div class="form-group">    
                <label class="col-sm-3 control-label">请假教师ID：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input class="form-control" type="text" onclick="selectLeaderWindow()" id="leaverTableName" readonly="true" th:value="${leaveTeacher.leaver == null ? '无' : leaveTeacher.leaver.userName}">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">请假类型：</label>
                <div class="col-sm-8">
                    <select name="type" class="form-control m-b" th:with="type=${@dict.getType('manage_leave_type')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{type}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">原因：</label>
                <div class="col-sm-8">
                    <textarea name="reason" class="form-control">[[*{reason}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">请假开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="startTime" th:value="${#dates.format(leaveTeacher.startTime, 'yyyy-MM-dd HH:mm')}" class="form-control" placeholder="yyyy-MM-dd HH:mm" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">请假结束时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="endTime" th:value="${#dates.format(leaveTeacher.endTime, 'yyyy-MM-dd HH:mm')}" class="form-control" placeholder="yyyy-MM-dd HH:mm" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">请假时长：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="duration" class="form-control" type="text" th:field="*{duration}" required>
                        <div class="input-group-btn">
                            <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button" aria-expanded="false"><span class="durType" th:text="${leaveTeacher.durType=='D'?'天':'小时'}">天</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li class="durTypeLi"><a href="javascript:;" durType="D">天</a></li>
                                <li class="durTypeLi"><a href="javascript:;" durType="H">小时</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "leave/leaveTea";
        $("#form-leaveTea-edit").validate({
            onkeyup: false,
            rules:{
                reason:{
                    maxlength:200,
                },
                duration:{
                    maxlength:4,
                    number:true
                }
            },
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-leaveTea-edit').serialize());
            }
        }

        $("input[name='startTime']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            minView:0,
            autoclose: true
        });

        $("input[name='endTime']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            minView:0,
            autoclose: true
        });
        $('.durTypeLi').click(function (e) {
            var durType = $(this).find('a').attr('durType');
            var durTypeName = $(this).find('a').text();
            $('#form-leaveTea-edit').find('.durType').text(durTypeName);
            $('input[name="durType"]').val(durType);
        });
        function selectLeaderWindow() {
            var treeId = $("#leaverTableId").val();
            var leaderId = treeId > 0 ? treeId : 1;
            var options = {
                title: '班主任选择',
                width: "800",
                url: ctx + "system/user/selectUserList/"+leaderId,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = $.modal.getChildFrame(index);
            $("#leaverTableId").val(body.find('#tableId').val());
            $("#leaverTableName").val(body.find('#tableName').val());
            $.modal.close(index);
        }
    </script>
</body>
</html>